require('./PageParentnoticedetail.styl');
import { Group, TextField, TextareaField, Boxs, Field, NavBar, Context, List } from 'saltui';
import Icon from 'salt-icon';
import { Control } from 'react-keeper';
const classNames = require("classnames")
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { HBox, Box, VBox } = Boxs;
const Replylist = require('components/replylist');
const PreplyItem = require('components/prelplyitem');
class Parentnoticedetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            replyList: [],
            replayFlag: 0,
            active: false,
            labelText: ''
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
        this.handleReply = this.handleReply.bind(this);
    }
    handleOnLeftClick() {
        Control.go(-1);
    }
    //右侧导航按钮
    handleOnRightClick() {
        this.setState({ active: true })
    }
    handleReply(text) {
        if (text) {
            this.setState({ active: false })
            Actions.replayNotice({data:Control.state.data,content:text},this.cb)
        }
    }
    render() {
        let t = this;
        return (
            <div className="parentnoticedetail">
                <NavBar
                    className={classNames({"ios-nav-bar":window.isIphone})}
                    isShow={false}
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={this.handleOnRightClick}
                    rightText={this.state.replayFlag == "1" ? "回复" : ""}
                    title="通知详情"
                />
                {/* 通知详情 */}
                <Group >
                    <Group.List >
                        <TextField
                            label={`【${this.state.labelText}】`}
                            placeholder=""
                            value={t.state.title}
                            tip=""
                            readOnly={true}
                            rightText=''
                            onChange={Context.noop}
                            className="title"
                        />
                    </Group.List>
                    <Group.List >
                        <TextareaField
                            layout="h"
                            label=""
                            minRows={2}
                            readOnly={true}
                            maxRows={5}
                            placeholder=""
                            value={t.state.textareaContent}
                            tip={null}
                            onChange={Context.noop}
                        />
                        <VBox hAlign="end" className="tip t-PR10">
                            <Box>
                                <HBox vAlign="center">
                                    <Box className="t-MR8"><Icon name="user" width="14px" fill="#999" /></Box>
                                    <Box>{this.state.sender}</Box>
                                </HBox>
                            </Box>
                            <Box className="t-MT10 t-MB10">{this.state.senderData}</Box>
                        </VBox>
                    </Group.List>
                </Group >
                {/* 文件显示 */}
                {
                    this.state.fileList && this.state.fileList.length > 0 &&
                    <List
                        layout="left"
                        hasRightIcon={true}
                        iconName='angle-right'
                        iconWidth={20}
                        isDelete={false}
                        onClick={this.handleClick}
                        data={this.state.fileList}
                        className="t-LH70 list-item-img"
                    />
                }
                {/* 回复信息输入框 */}
                <Replylist
                    ref="replylist"
                    handleReply={this.handleReply}
                    active={this.state.active}
                    nofocus={true}
                    disappear={true}
                />
                {/* 家长端回复信息列表 */}
                { this.state.replayFlag == '1' && this.state.replyList.length > 0 &&
                    this.state.replyList.map((item, index) => {
                        return (
                            <PreplyItem
                                data={Control.state.data}
                                key={index}
                                {...item}
                                num={index}
                            />
                        );
                    })
                }
            </div>
        );
    }


    componentWillMount() {
    }

    componentDidMount() {
        let cb = (userType) => {
            Actions.getReplayList({ userType, ...Control.state.data });
        }
        this.cb = cb;
        Actions.fetch(Control.state.data, cb);
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Parentnoticedetail, Reflux.connect(Store));

module.exports = Parentnoticedetail;
